<script setup lang="ts">
import {useRouter} from 'vue-router'
const $router=useRouter()
interface Props{
  item:any
}
const props = defineProps<Props>()
function gotoDetail() {
  _hmt.push(['goodsClick','goods','click','id',props.item._id])
  $router.push({
    path:'/goods/detail',
    query:{
      id:props.item._id
    }
  })
}
</script>

<template>
  <div @click="gotoDetail"
    w:flex="~ nowrap"
    w:align="items-stretch"
    w:border="b-2 solid gray-300"
    w:p="y-4"
  >
    <img :src="props.item.goods_thumb"
      w:w="64"
      w:h="64"
    />
    <div
      w:m="4"
      w:flex="~ col nowrap"
      w:justify="between"
    >
      <div w:text="3xl" class="line-clamp-2">{{props.item.name}} {{props.item.sku_name}}</div>
      <div
        w:text="red-600"
      >
        <span w:text="2xl">￥</span>
        <span w:text="4xl">{{props.item.price}}</span>
      </div>
      <div
        w:text="gray-400"
      >
        <span>总销量:{{props.item.total_sell_count}}</span>
        <span>月销量:{{props.item.month_sell_count}}</span>
        <span>评论数:{{props.item.comment_count}}</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>